<template>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span>门店的添加</span>
    <template #footer>
      <span class="dialog-footer">
       
        <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="门店名称" prop="storeName">
      <el-input v-model="ruleForm.storeName" />
    </el-form-item>

    <el-form-item label="分店名称" prop="branchName">
      <el-input v-model="ruleForm.branchName" />
    </el-form-item>

    <el-form-item label="商户地址" prop="name" >

        <el-cascader placeholder="请选择商户地址" v-model="ruleForm.merchantAddress" v-bind:options="pcaTextArr" size="large" @change="updateAddress()" />
     
    </el-form-item>


    <el-form-item label="详细地址" prop="sss">
        <el-input v-model="ruleForm.sss" />
    </el-form-item>


    <el-form-item label="门店照片" prop="serviceTel" >

      <el-upload
    v-model:file-list="fileList"
    action="https://localhost:44392/PostImag"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  

    </el-form-item>

    <el-form-item label="客服电话" prop="serviceTel">
      <el-input v-model="ruleForm.serviceTel" />
      手机号或固化
    </el-form-item>

    <el-form-item label="门店状态">
      <el-radio-group v-model="ruleForm.storeStatus">
        <el-radio label="启用"  :value='true'/>
        <el-radio label="停用" :value='false' />
      </el-radio-group>
    </el-form-item>

    <el-form-item label="门店介绍">
      <el-input v-model="ruleForm.storeIntroduction" type="textarea" />
    </el-form-item>

    <el-form-item label="入住须知">
      <el-input v-model="ruleForm.checkInInstructions" type="textarea" />
    </el-form-item>
    
    <el-form-item label="交通信息">
      <el-input v-model="ruleForm.trafficInformation" type="textarea" />
    </el-form-item>


    <el-form-item label="配套服务">
      <el-checkbox-group v-model="ruleForm.supportingServices">
        <el-checkbox label="免费wifi" name="type" />
        <el-checkbox label="网费" name="type" />
        <el-checkbox label="停车场" name="type" />
        <el-checkbox label="商务中心" name="type" />
        <el-checkbox label="会议厅" name="type" />
        <el-checkbox label="多功能厅" name="type" />
        <el-checkbox label="行政酒廊" name="type" />
        <el-checkbox label="洗衣服务" name="type" />
        <el-checkbox label="接机服务" name="type" />
        <el-checkbox label="行李寄存" name="type" />
        <el-checkbox label="儿童看护" name="type" />
        <el-checkbox label="开夜房" name="type" />
        <el-checkbox label="唤醒服务" name="type" />
        <el-checkbox label="西餐厅" name="type" />
        <el-checkbox label="中餐厅" name="type" />
        <el-checkbox label="咖啡馆" name="type" />
        <el-checkbox label="送餐服务" name="type" />
        <el-checkbox label="酒吧" name="type" />
        <el-checkbox label="游泳池" name="type" />
        <el-checkbox label="健身房" name="type" />
        <el-checkbox label="KTV" name="type" />
        <el-checkbox label="儿童乐园" name="type" />
        <el-checkbox label="棋牌室" name="type" />
        <el-checkbox label="球馆" name="type" />
        <el-checkbox label="楼层" name="type" />
        <el-checkbox label="窗台" name="type" />
        <el-checkbox label="浴缸" name="type" />
        <el-checkbox label="热水" name="type" />
        <el-checkbox label="电脑" name="type" />
        <el-checkbox label="国内长途" name="type" />
        <el-checkbox label="国际长途" name="type" />
        <el-checkbox label="冰箱" name="type" />
        <el-checkbox label="保险箱" name="type" />
        <el-checkbox label="迷你吧" name="type" />
      </el-checkbox-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        添加
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>


      </span>
    </template>
  </el-dialog>


 
    <div style="margin-top: 20px">

      <el-button @click="dialogVisible = true" type="primary">添加</el-button>
      <el-cascader placeholder="请选择商户地址" v-model="page.merchantAddress" v-bind:options="pcaTextArr" size="large" @change="updateAddress()" />
      <el-input v-model="page.storeName" placeholder="请输入酒店名称"  style="width: 200px" />

       <el-select v-model="page.storeStatus" placeholder="请选择酒店状态" style="width: 200px">
        <el-option label="启动" value="true" />
        <el-option label="禁用" value="false" />
      </el-select>

      <el-button type="primary" @click="ShowTable()">查询</el-button>

    </div>
 


  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="storeName" label="酒店名称" width="150" />
    <el-table-column prop="branchName" label="分店名称" width="120" />
    <el-table-column prop="merchantAddress" label="地址" width="120" />
    <el-table-column prop="storeStatus" label="状态" width="120" >
      <template #default="scope">
        <el-tag v-if="scope.row.storeStatus === true" type="success">正常</el-tag>
        <el-tag v-else type="danger">禁用</el-tag>
      </template>

      


    
    </el-table-column>
    
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" 
          >操作</el-button
        >
        <el-button link type="primary" size="small" @click="deleterow(scope.row.id)">删除</el-button>
        <el-button link type="primary" size="small" @click="UpdateShow(scope.row.id)">修改状态</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref,reactive, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import axios from 'axios'
import { pcaTextArr } from "element-china-area-data";

import { ElMessage } from 'element-plus'


import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
 
])

const dialogImageUrl = ref('')


const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value ="https://localhost:44392/Files/" +uploadFile.url!
 
}
const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

import type { FormInstance, FormRules } from 'element-plus'
import { isValidComponentSize } from 'element-plus/es/utils/index.mjs';


onMounted(()=>{
  ShowTable();
})


//显示


const tableData = ref([{}]);

const page  = reactive({
  merchantAddress :'',
  storeStatus:'true',
  storeName:''
})



const ShowTable=(()=>{

  page.merchantAddress=page.merchantAddress.toString();

console.log(page.merchantAddress)
    axios.get('https://localhost:44392/GetStoreMangementList?',{
      params: {
        merchantAddress : page.merchantAddress,
        storeStatus : page.storeStatus,
        storeName:page.storeName,
      }
    }).then((res)=>{
      console.log(res.data.data);
      tableData.value=res.data.data;
    })
})

///删除
const deleterow =(id:any)=>{

 
  axios.delete('https://localhost:44392/DeleteStoreMangement/'+id).then((res)=>{
    
    if(res.data.code==200)
    {
      alert("删除成功");
      ShowTable();
    }else
    {
      alert("删除失败");
    }
    ShowTable();
  })
}




const UpdateShow = (id:any) => {
  axios.get('https://localhost:44392/UpdateStoreMangement?id='+id).then((res)=>{
    
    if(res.data.code==200)
    {
      alert("修改成功");
      ShowTable();
    }else
    {
      alert("修改失败");
      ShowTable();
    }
    ShowTable();
  })
}


interface RuleForm {
    storeName: string,
  branchName: string,
  merchantAddress: string
  storePicture: string,
  serviceTel: string,
  storeStatus: string,
  storeIntroduction: string,
  checkInInstructions: string,
  trafficInformation: string,
  supportingServices: never[],
  supportingService:string,
  sss : string
  
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    storeName: '',
  branchName: '',
  merchantAddress:'',
  storePicture: '',
  serviceTel: '',
  storeStatus: '',
  storeIntroduction: '',
  checkInInstructions: '',
  trafficInformation: '',
  supportingServices: [],
  supportingService:"",
  sss : ''
})

const rules = reactive<FormRules<RuleForm>>({
    
  
})


let receivingInfo = reactive({
    receivingId : 1001,
    area : '',
})



let area = ref(receivingInfo.area.split(","));

let updateAddress = () => {
    receivingInfo.area = area.value.toString();
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

        ruleForm.storePicture = fileList.value.map((item:any)=>item.url).join(",")
    
        ruleForm.supportingService=ruleForm.supportingServices.join(",");
        ruleForm.merchantAddress=ruleForm.merchantAddress+","+ruleForm.sss;
        axios.post('https://localhost:44392/api/app/store-management-services/resses-add', ruleForm).then((res) => {
            
            if(res.data.code==200)
       {
         ElMessage({
          message: '添加成功',
          type: 'success',
        })
        console.log(ruleForm)
        ShowTable();
        
       }else{
         ElMessage.error('添加失败')
       }
        })
    
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}









</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>

